<template>
  <div>
    <div class="qrcon">
      <iframe
        scrolling="no"
        :width="iframeW"
        :height="iframeH"
        frameborder="0"
        allowtransparency="true"
        :src="setSrc"
        ref="iframe"
      ></iframe>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive } from 'vue'
    const props = defineProps({
        // 自定义样式
        cssHref:{
            type:String,
            default:'https://iotx.oss-cn-beijing.aliyuncs.com/iotx/bg/bindcss.css'
        },
        //iframeH
        iframeH:{
            type:Number,
            default:230
        },
        //iframeW
        iframeW:{
            type:Number,
            default:200
        }
    })
    const obj = {
        appid:'wxf1c6ed468b10dad4',
        redirect_uri:encodeURIComponent('http://smart-build.cn/#/qrconnent'),
        state:'',
    }
    const setSrc = computed(() => {
        var _url =
            "https://open.weixin.qq.com/connect/qrconnect?appid=" +
            obj.appid +
            "&self_redirect=true" +
            "&scope=snsapi_login" +
            "&redirect_uri=" +
            obj.redirect_uri +
            "&state=" +
            obj.state +
            "&login_type=jssdk&self_redirect=default&style=black" +
            "&href=" +
            props.cssHref;
        return _url;
    })
    let data = reactive({
        //用于保持请求和回调的状态
        state:'',
        appid:"wxf1c6ed468b10dad4",
        redirect_uri:encodeURIComponent('http://smart-build.cn/#/qrconnent')
    })
</script>

<style lang='scss' scoped>
    
</style>